<template>
  <el-card class="m-2 p-3 relative">
    <div slot="header" class="flex items-center justify-between">

      <el-date-picker
        v-model="datePickerList"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        clearable
        @change="initData"/>

      <el-button type="primary" @click="deBounceWrap(handleToExcel)">导出</el-button>
    </div>

    <el-table stripe border :data="filterListObj" v-loading="loading" empty-text="空">
      <el-table-column v-for="item in getTableLabel" :key="item" :label="item" :prop="item"></el-table-column>
    </el-table>

    <el-pagination
      class="text-right mt-4"
      background
      layout="total, prev, pager, next"
      :total="meta.total"
      :page-size="20"
      @current-change="handleCurrentPageChange">
    </el-pagination>
  </el-card>
</template>

<script>
import {
  statisticKeepMallcate,
  statisticCate,
  statisticKeepMallcateExcel
} from '@/api/dataPanel/financial'

import {NOOP, parseTime} from "@/utils";

export default {
  data() {
    return {
      loading: false,
      tableData: [],

      datePickerList: [],
      /* label 对照表 */
      cateList: [],

      meta: {
        currentPage: 1,
        total: 0
      },
    }
  },
  filters: {
    formatTime(value) {
      return new Date(value * 1e3).toLocaleString()
    }
  },
  computed: {
    filterListObj() {
      const resultList = []
      this.tableData.forEach(record => {
        const innerRecord = {}
        this.cateList.forEach(cate => {
          let tempMoneyTarget = Object.values(record).find(r => {
            if (typeof r === "number") return false
            return r.cate_id === cate.id
          })

          innerRecord[cate['title']] = (tempMoneyTarget && tempMoneyTarget.money) || "——"
          innerRecord['开始时间'] = parseTime(record.start_time)
        })
        resultList.push(innerRecord)
      })
      return resultList
    },
    getTableLabel() {
      let label = this.cateList.map(item => item.title)
      return ['开始时间', ...label]
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      this.loading = true

      try {
        let [start_time, end_time] = this.datePickerList || []
        if (start_time) start_time = new Date(start_time).valueOf() / 1e3
        if (end_time) end_time = new Date(end_time).valueOf() / 1e3

        const [cate, tableData] = await Promise.all([
          statisticCate(),
          statisticKeepMallcate(this.meta.currentPage, start_time, end_time)
        ])

        this.cateList = cate.data

        const {data: {current_page, last_page, total, list}} = tableData
        this.meta.currentPage = current_page
        this.meta.total = total

        this.tableData = list

      } catch (e) {
        this.$message.error("网络请求发生错误！")
      } finally {
        this.loading = false
      }
    },
    handleCurrentPageChange(page) {
      this.meta.currentPage = page
      this.initData()
    },
    async handleToExcel() {
      try {
        let [start_time, end_time] = this.datePickerList || []
        if (start_time) start_time = new Date(start_time).valueOf() / 1e3
        if (end_time) end_time = new Date(end_time).valueOf() / 1e3

        const {data: {game_keep_data}} = await statisticKeepMallcateExcel(start_time, end_time)

        window.open(game_keep_data)
      } catch (e) {
      }
    }
  }
}
</script>
